<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据字典</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/global.css" media="all"/>
    <style>
        body {
            margin: 10px;
        }

        .layui-table-cell {
            display: table-cell;
            vertical-align: middle;
        }

        .layui-table thead tr,
        .layui-table-header,
        .layui-table-tool,
        .layui-table-total,
        .layui-table-total tr,
        .layui-table-patch,
        .layui-table-mend,
        .layui-table[lay-even] tr:nth-child(even),
        .layui-table tbody tr:hover,
        .layui-table-hover,
        .layui-table-click {
            background-color: #fff;
        }
    </style>
</head>
<body>

<div class="layui-btn-group demoTable">
    <button style="margin-right: 10px !important;" class="layui-btn" data-type="add">新增</button>
    <button style="margin-right: 10px !important;" class="layui-btn" data-type="edit">修改</button>
    <button class="layui-btn" data-type="del">删除</button>
</div>

<table class="layui-hide " id="demo" lay-filter="test"></table>

<script type="text/javascript" src="../../js/libs/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../js/jq.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/my/permission.js"></script>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/dict.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script>
    // 阻止事件冒泡
    function stopPropagation() {
        e = window.event || e;
        if (document.all) {
            e.cancelBubble = true;
        } else {
            e.stopPropagation();
        }
    }

    layui.config({
        version: '1545041465443' //为了更新 js 缓存，可忽略
    });
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () {
        var $ = layui.$;
        var table = layui.table;
        table.render({
            elem: '#demo'
            , url: '/dataDict/findAll'
            , title: '数据字典'
            , method: 'post'
            , page: true
            , cols: [[
                {type: 'radio'}
                , {
                    field: 'code', title: '编码', align: 'center', event: 'collapse', width: 150
                    , templet: function (d) {
                        if (d.next == 0) {
                            return '<div style="padding: 0 10px 0 20px;">' + d.code + '</div>'
                        } else {
                            return '<div style="position: relative;padding: 0 10px 0 20px;">' + d.code + '<i style="left: 0px;" lay-tips="展开" class="layui-icon layui-colla-icon layui-icon-right"></i></div>'
                        }
                    }
                }
                , {field: 'name', align: 'center', title: '名称', width: 200}
                , {field: '', align: 'center', title: '备注'}
            ]],
            done: function (res, curr, count) {
                $('th').css({'font-weight': 'bold'});
            }
        });

        var childrenIndex;
        //监听工具条
        table.on('tool(test)',
            function (obj) {
                var data = obj.data;
                if (obj.event === 'collapse') {
                    if (data.next != 0) {
                        var trObj = layui.$(this).parent('tr'); //当前行
                        var accordion = true; //开启手风琴，那么在进行折叠操作时，始终只会展现当前展开的表格。
                        var content = '<table></table>'; //内容
                        //表格行折叠方法
                        collapseTable({
                            elem: trObj,
                            accordion: accordion,
                            content: content,
                            success: function (trObjChildren, index) { //成功回调函数
                                //trObjChildren 展开tr层DOM index 当前层索引
                                trObjChildren.find('table').attr("id", index);
                                childrenIndex = index;
                                trObjChildren.find('table').attr("lay-filter", "test1");
                                table.render({
                                    elem: "#" + index
                                    , url: '/dictDetails/findByDictId/' + data.id
                                    , cellMinWidth: 80
                                    , method: 'post'
                                    , page: true
                                    , cols: [[
                                        {type: 'radio'}
                                        , {field: 'dataKey', align: 'center', width: 150, title: '编号'}
                                        , {field: 'dataValue', align: 'center', title: '值', width: 200}
                                        , {field: '', align: 'center', title: '备注'}
                                    ]],
                                    done: function (res, curr, count) {
                                        $('th').css({'font-weight': 'bold'});
                                    }
                                });
                            }
                        });
                    }
                }
            }
        );

        function collapseTable(options) {
            var trObj = options.elem;
            if (!trObj) return;
            var accordion = options.accordion,
                success = options.success,
                content = options.content || '';
            var tableView = trObj.parents('.layui-table-view'); //当前表格视图
            var id = tableView.attr('lay-filter'); //当前表格标识
            var index = trObj.data('index'); //当前行索引
            var leftTr = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + index + '"]'); //左侧当前固定行
            var rightTr = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + index + '"]'); //右侧当前固定行
            var colspan = trObj.find('td').length; //获取合并长度
            var trObjChildren = trObj.next(); //展开行Dom
            var indexChildren = id + '-' + index + '-children'; //展开行索引
            var leftTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + indexChildren + '"]'); //左侧展开固定行
            var rightTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + indexChildren + '"]'); //右侧展开固定行
            var lw = leftTr.width() + 15; //左宽
            var rw = rightTr.width() + 15; //右宽
            //不存在就创建展开行
            if (trObjChildren.data('index') != indexChildren) {
                //装载HTML元素
                var tr = '<tr class="box-div-tr" data-index="' + indexChildren + '"><td colspan="' + colspan + '"><div style="height: auto;padding-left:' + lw + 'px;padding-right:' + rw + 'px" class="layui-table-cell">' + content + '</div></td></tr>';
                trObjChildren = trObj.after(tr).next().hide(); //隐藏展开行
                var fixTr = '<tr data-index="' + indexChildren + '"></tr>';//固定行
                leftTrChildren = leftTr.after(fixTr).next().hide(); //左固定
                rightTrChildren = rightTr.after(fixTr).next().hide(); //右固定
            }
            //展开|折叠箭头图标
            trObj.find('td[lay-event="collapse"] i.layui-colla-icon').toggleClass("layui-icon-right layui-icon-down");
            //显示|隐藏展开行
            trObjChildren.toggle();
            //开启手风琴折叠和折叠箭头
            if (accordion) {
                trObj.siblings().find('td[lay-event="collapse"] i.layui-colla-icon').removeClass("layui-icon-down").addClass("layui-icon-right");
                trObjChildren.siblings('[data-index$="-children"]').hide(); //展开
                rightTrChildren.siblings('[data-index$="-children"]').hide(); //左固定
                leftTrChildren.siblings('[data-index$="-children"]').hide(); //右固定
            }
            success(trObjChildren, indexChildren); //回调函数
            heightChildren = trObjChildren.height(); //展开高度固定
            rightTrChildren.height(heightChildren + 110).toggle(); //左固定
            leftTrChildren.height(heightChildren + 110).toggle(); //右固定
        }

        var active = {
            add: function () {
                var checkStatus = table.checkStatus('demo')
                    , data = checkStatus.data;
                if (data.length == 0) {
                    /*新增字典*/
                    layer.open({
                        type: 2,
                        title: ['新增', 'font-weight:bold;font-size:20px;'],
                        shadeClose: true,
                        shade: 0.8,
                        area: ['451px', '280px'],
                        content: 'addDataDict.html'
                    });
                } else {
                    /*新增详情*/
                    layer.open({
                        type: 2,
                        title: ['新增字典明细', 'font-weight:bold;font-size:20px;'],
                        shadeClose: true,
                        shade: 0.8,
                        area: ['451px', '280px'],
                        content: 'addDictDetails.html?dictId=' + data[0].id
                    });
                }
            }
            , edit: function () {
                var parent = table.checkStatus('demo')
                    , parentData = parent.data
                    , children = table.checkStatus(childrenIndex)
                    , childrenData = children.data;
                if (parentData.length == 0 && childrenData.length == 0) {
                    layer.msg('请选择一条数据！');
                } else if (parentData.length > 0 && childrenData.length == 0) {
                    // 编辑字典
                    layer.open({
                        type: 2,
                        title: ['编辑', 'font-weight:bold;font-size:20px;'],
                        shadeClose: true,
                        shade: 0.8,
                        area: ['451px', '280px'],
                        content: 'updateDataDict.html?id=' + parentData[0].id
                    });
                } else if (childrenData.length > 0) {
                    // 编辑字典详情
                    layer.open({
                        type: 2,
                        title: ['编辑', 'font-weight:bold;font-size:20px;'],
                        shadeClose: true,
                        shade: 0.8,
                        area: ['451px', '280px'],
                        content: 'updateDictDetails.html?id=' + childrenData[0].id
                    });
                }
            }
            , del: function () {
                var parent = table.checkStatus('demo')
                    , parentData = parent.data
                    , children = table.checkStatus(childrenIndex)
                    , childrenData = children.data;
                if (parentData.length == 0 && childrenData.length == 0) {
                    layer.msg('请选择一条数据！');
                } else if (parentData.length > 0 && childrenData.length == 0) {
                    // 删除字典
                    layer.confirm('真的删除行么', {title: ['删除', 'font-size: 20px;font-weight: bold;']}, function () {
                        $.ajax({
                            type: 'delete',
                            url: '/dataDict/delete/' + parentData[0].id,
                            success: function (res) {
                                if (res.errorCode == 0) {
                                    layer.msg("删除成功", {time: 1000, icon: 1}, function () {
                                        location.reload();
                                    });
                                } else {
                                    layer.msg(res.errorMsg);
                                }
                            }
                        });
                    });
                } else if (childrenData.length > 0) {
                    // 删除字典详情
                    layer.confirm('真的删除行么', {title: ['删除', 'font-size: 20px;font-weight: bold;']}, function () {
                        $.ajax({
                            type: 'delete',
                            url: '/dictDetails/delete/' + childrenData[0].id,
                            success: function () {
                                layer.msg("删除成功", {time: 1000, icon: 1}, function () {
                                    location.reload();
                                });
                            }
                        });
                    });
                }
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        table.on('radio()', function (obj) {
            $('.layui-table tr .laytable-cell-radio > div').removeClass('layui-form-radioed');
            $('.layui-table tr .laytable-cell-radio > div i').removeClass('layui-anim-scaleSpring').text('')

            $(this).addClass('layui-form-radioed');
            $(this).find('i').addClass('layui-anim-scaleSpring').text('')

            stopPropagation()
        })
    });
</script>
</body>
</html>